Date range

export const Default = () => {
  const [value, setValue] = useRange({ from: '2026-07-14', to: '2026-07-21' });
  return (
    <div style={grid}>
      <DateRangeField value={value} onChange={setValue} today={TODAY} />
    </div>
  );
};

export const Variants = () => {
  const [closed, setClosed] = useRange({ from: '2026-07-14', to: '2026-07-21' });
  const [openEnd, setOpenEnd] = useRange({ from: '2026-08-01', to: null });
  const [openStart, setOpenStart] = useRange({ from: null, to: '2026-07-28' });
  const [year, setYear] = useRange({ from: '2026-12-15', to: '2027-01-10' });
  return (
    <div style={row}>
      <Labeled label="closed — 14. 7. – 21. 7.">
        <DateRangeField value={closed} onChange={setClosed} today={TODAY} />
      </Labeled>
      <Labeled label="open end — od 1. 8.">
        <DateRangeField value={openEnd} onChange={setOpenEnd} today={TODAY} />
      </Labeled>
      <Labeled label="open start — do 28. 7.">
        <DateRangeField value={openStart} onChange={setOpenStart} today={TODAY} />
      </Labeled>
      <Labeled label="across years — 15. 12. – 10. 1. 27">
        <DateRangeField
          value={year}
          onChange={setYear}
          today={TODAY}
          fromLabel="Začátek"
          toLabel="Konec"
        />
      </Labeled>
    </div>
  );
};

export const States = () => {
  const [empty, setEmpty] = useRange({ from: null, to: null });
  const [filled, setFilled] = useRange({ from: '2026-07-14', to: '2026-07-21' });
  const [error, setError] = useRange({ from: '2026-07-14', to: '2026-07-21' });
  const [disabled, setDisabled] = useRange({ from: '2026-07-14', to: '2026-07-21' });
  return (
    <div style={grid}>
      <div style={row}>
        <Labeled label="empty (placeholders od / do)">
          <DateRangeField value={empty} onChange={setEmpty} today={TODAY} />
        </Labeled>
        <Labeled label="filled">
          <DateRangeField value={filled} onChange={setFilled} today={TODAY} />
        </Labeled>
        <Labeled label="error">
          <DateRangeField value={error} onChange={setError} error today={TODAY} />
        </Labeled>
        <Labeled label="disabled">
          <DateRangeField value={disabled} onChange={setDisabled} disabled today={TODAY} />
        </Labeled>
      </div>
      <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
        Focus: `.dp-field:focus-within` draws the accent border + 3px accent ring around both ends.
        A start typed after the end is swapped, never left invalid.
      </span>
    </div>
  );
};

export const Composition = () => {
  const [period, setPeriod] = useRange({ from: '2026-07-01', to: '2026-07-31' });
  return (
    <div style={grid}>
      <Labeled label="report filter — label from <Field>, apply button">
        <div style={{ display: 'flex', gap: 'var(--sp-4)', alignItems: 'flex-end' }}>
          <Field label="Období">
            <DateRangeField value={period} onChange={setPeriod} today={TODAY} />
          </Field>
          <Button variant="primary">Zobrazit</Button>
        </div>
      </Labeled>
      <Labeled label="panel header (static .dp-entry.pair) — ends + day count">
        <div className="dp-inline" style={{ width: 540 }}>
          <div className="dp-entry pair">
            <Icon name="calendar" />
            <input aria-label="Od" placeholder="od" readOnly value="1. 7." />
            <span className="dash">–</span>
            <input aria-label="Do" placeholder="do" readOnly value="31. 7." />
            <span className="count">31 dní</span>
          </div>
        </div>
      </Labeled>
    </div>
  );
};